<script lang="ts" setup>
const isMove = ref(false);

const xMove = ref(100);
const yMove = ref(10);

const startPosition = ref({ x: 0, y: 0 });
let isDown = true;
const mouseDown = (e: MouseEvent) => {
  e.preventDefault();
  isMove.value = true;
  if (isDown) {
    startPosition.value.x = e.clientX;
    startPosition.value.y = e.clientY;
    isDown = false;
  }
};

const mouseMove = (e: MouseEvent) => {
  e.preventDefault();
  if (!isMove.value) {
    return;
  }
  let moveWidth = startPosition.value.x - e.clientX;
  let moveHeight = startPosition.value.y - e.clientY;
  xMove.value = 100 - moveWidth;
  yMove.value = 14 - moveHeight;
};
const mouseUp = (e: MouseEvent) => {
  e.preventDefault();
  isMove.value = false;
};
</script>

<template>
  <div @mousemove="mouseMove" class="h-80vh w-full">
    <div
      @mousedown="mouseDown"
      @mouseup="mouseUp"
      :style="{ transform: `translate(${xMove}px, ${yMove}px)` }"
      class="w-50px h-50px bg-red-300 cursor-pointer box"
    ></div>
  </div>
</template>

<style lang="less" scoped></style>
